import React from 'react';
import { Layout, Menu, Breadcrumb, Icon,Row,Col} from 'antd';
import {Link,NavLink} from 'react-router-dom'
import './layout.css'
import MMUtile from 'util/mm.jsx'
import User from 'service/user-service.jsx'

const _mm = new MMUtile();
const _user = new User();

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;



class SiderDemo extends React.Component {
	constructor(props){
    super(props)
    let rootSubmenuKeys = ['sub1', 'sub2', 'sub3'];
    this.state = {
      collapsed: false,
      openKeys: ['sub1'],
      username:_mm.getStorage('userInfo').username
    };
	}

  onCollapse(collapsed){
    this.setState({ collapsed:!this.state.collapsed });
  }
  onOpenChange(openKeys){
    let lastopenKeys = openKeys.slice(-1);
    this.setState({ openKeys: lastopenKeys});
  }
  handleLogut(e){
    _user.logout().then((res)=>{
      _mm.removeStorage('userInfo');
      window.location.href="/login"
    },(errMsg)=>{
      _mm.errorTips(errMsg)
    })
  }
  render() {
    let hidedom =this.state.collapsed?'none':'block';
    let winheight =document.body.clientHeight;
    return (
      <Layout >
        <Sider
          collapsible
          collapsed={this.state.collapsed}
          onCollapse={(e)=>this.onCollapse(e)}  style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }}
        >
          <div className="logo" />
          <div className="navtop">
            <div className="headimgbox"></div>
          </div>
          <Menu theme="dark" 
            defaultSelectedKeys={['1']} 
            mode="inline" 
            openKeys={this.state.openKeys}
            onOpenChange={(e)=>this.onOpenChange(e)}
          >
            <Menu.Item key="1"><NavLink exact activeClassName="activefont" to="/">
              <Icon type="home" />
              <span>首页</span></NavLink>
            </Menu.Item>
            <SubMenu
              key="sub1"
              title={<span><Icon type="user" /><span>账号信息</span></span>}
            >
              <Menu.Item key="3" style={{display:hidedom}}><Link to="/user-base">基本资料</Link></Menu.Item>
              <Menu.Item key="4" style={{display:hidedom}}><Link to="/user-link">关联账号</Link></Menu.Item>

            </SubMenu>
            <SubMenu
              key="sub2"
              title={<span><Icon type="safety" /><span>安全信息</span></span>}
            >
              <Menu.Item key="6" style={{display:hidedom}}><Link to="/">修改密码</Link></Menu.Item>
              <Menu.Item key="8" style={{display:hidedom}}><Link to="/">密保设置</Link></Menu.Item>
              <Menu.Item key="16" style={{display:hidedom}}><Link to="/">绑定手机</Link></Menu.Item>
              <Menu.Item key="18" style={{display:hidedom}}><Link to="/">登录邮箱</Link></Menu.Item>
              <Menu.Item key="19" style={{display:hidedom}}><Link to="/">登录记录</Link></Menu.Item>

            </SubMenu>
            <SubMenu
              key="sub3"
              title={<span><Icon type="link" /><span>快捷入口</span></span>}
            >
              <Menu.Item key="31"  style={{display:hidedom}}><a href="https://ant.design" target="_blank">猪场管理平台</a></Menu.Item>
              <Menu.Item key="32" style={{display:hidedom}}><a href="https://ant.design" target="_blank">屠宰管理平台</a></Menu.Item>
              <Menu.Item key="33" style={{display:hidedom}}><a href="https://ant.design" target="_blank">门店管理平台</a></Menu.Item>
              <Menu.Item key="34" style={{display:hidedom}}><a href="https://ant.design" target="_blank">经销商管理平台</a></Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout style={{ marginLeft:this.state.collapsed?80: 200 }}>
          <Header  className="header" style={{ background: '#fff', padding: 0,borderBottom:'2px solid #ddd' }}>
            <div style={{padding:'0 24px',float:'right'}}>{
              this.state.username
              ?<span className="paddingright">欢迎您，{this.state.username}  </span>
              :<span className="paddingright">欢迎您  </span>
            } <span style={{cursor:'pointer'}} onClick={(e)=>{this.handleLogut(e)}}><Icon type="question-circle" />退出登录</span></div>
          </Header>
          <Content >
            {/*<Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>*/}
            <div className="containerbox" style={{minHeight:winheight-50}}>
              {this.props.children}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            Ant Design ©2016 Created by Ant UED
          </Footer>
        </Layout>
	    </Layout>
    );
  }
}
export default SiderDemo